<template>
  <header class="simple-header">
    <i class="iconfont icon-fanhui1" @click="goBack"></i>
    <div class="simple-header-title">{{ title }}</div>
    <i class="iconfont icon-gengduo1"></i>
  </header>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
// import pubsub from "pubsub-js";
export default defineComponent({
  name: "simpleheader",
  props: { title: { type: String } },
  setup(props, context) {
    //将传入的props参数转为响应式输出
    const title = ref(props.title);
    //使用路由组件
    const router = useRouter();
    // 回退路由
    const goBack = () => {
      if(title.value=="我的订单"){      // 如果是我的订单页面，回退到我的界面
        router.push({ path: `user?` })
      }else if(title.value=="生成订单"){   // 如果是生成订单页面，回退到购物车页面
        router.push({ path: `cart?` })
      }else{
        router.go(-1);
      }
    };
    return { goBack, title };
  },
});
</script>

<style lang="less" scoped>
@import '../common/style/mixin.less';
.simple-header {
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  z-index: 10000;
  .fj();
  .wh(100%, 44px);
  line-height: 44px;
  padding: 0 10px;
  .boxSizing();
  color: #252525;
  background: #fff;
  border-bottom: 1px solid #dcdcdc;
  .simple-header-title {
    font-size: 14px;
  }
}
</style>